<template>
	<!--v-for='item in list'-->
	<div class="list" >
		<!--轮播图-->
		<div id="slide"></div>
		
		<!--分类-->
		<div id="nav">
			<div class="nav_item"><img src="../../assets/img/1.jpg" alt="排行榜" /></div>
			<div class="nav_item"><img src="../../assets/img/2.jpg" alt="分类" /></div>
			<div class="nav_item"><img src="../../assets/img/3.jpg" alt="三江榜" /></div>
			<div class="nav_item"><img src="../../assets/img/4.jpg" alt="专题" /></div>
		</div>
		
		<!--轮播消息-->
		<div id="message">
			<div class="message_news">
				<img src="../../assets/img/laba.jpg" alt="喇叭" />
				<span>11</span>
			</div>
		</div>
		<!--书籍列表-->
		<div id="main_list">
			<div class="title">
				<span>11</span>
			</div>
			<div class="book">
				<img src="" alt="wu" />
				<div class="book_cell">
					<h4>小说名字</h4>
					<p>小说介绍,多出的字数省略晚上发顺sadfsfd saasfsfdsafsaf sa as</p>
					<div class="book_meta">
						<div class="book_meta_a">
							<span class="author">作者</span>
						</div>
						<div class="book_meta_i">
							<span>仙侠</span>
							<span>连载</span>
							<span>1000万字</span>
						</div>	
				</div>
				</div>
				
			</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default {
		prop: ['list']
	}
</script>

<style>
	
	
	/*#selectest{
		position:relative;
		width:100%;
	}*/
	
	#slide{
		width:100%;
		height:1.793103rem;
		background:cyan;
		border-style:none;
	}
	#nav{
		width:100%;
		display:flex;
		text-align:center;
		align-items: center;
	}
	#nav .nav_item {
		width:25%;
	}
	#nav .nav_item img {
		width:0.810344rem;
		height:1.431034rem;
	}
	#message{
		width:100%;
		/*text-align:center;*/
		/*text-align: justify;*/
	}
	#message .message_news{
		width:9.482758rem;
		height:0.534482rem;
		background-color:#f6f7f9;
		margin:0 auto;
		border-radius:0.25862rem;
		padding-left:0.275862rem;
	}
	#message .message_news img{
		width:0.310344rem;
		height:0.293103rem;
		vertical-align:middle;
	}
	#message .message_news span{
		line-height:0.534482rem;
	}
	#main_list{
		position: relative;
		width:100%;
		height:6.534482rem;
		padding:0 0 0 0.25862rem;
		background:white;
	}
	#main_list .title{
		height:0.913793rem;
		background-color:cornflowerblue;
	}
	/*#list .title span{
		display:inline-block;
		width:0.034482rem;
		height:0.25862rem;
		background:#d23642;
	}*/
	#main_list .book{
		width:100%;
		height:1.87931rem;
		/*text-align:center;*/
		border-bottom:solid 0.017241rem;
		border-color:#e3e4e6;
		padding:0.241379rem 0;
	}
	#main_list .book img{
		width:1.034482rem;
		height:1.396551rem;
		margin-right:0.155172rem;
		vertical-align:top;
	}
	#main_list .book .book_cell{
		display:inline-block;
		width: 8.3rem;
		/*vertical-align:top;*/
	}
	#mian_list .book .book_cell h4{
		line-height: 0.241379rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size:0.241379rem;
	}
	#main_list .book .book_cell p{
		line-height: 0.32rem;
		font-size:0.224137rem ;
		margin-top: 0.241379rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	#main_list .book .book_cell .book_meta{
		height:0.189655rem;
		font-size:0.189655rem;
	}
	#main_list .book .book_cell .book_meta .book_meta_a{
		display:inline-block;
	}
	#main_list .book .book_cell .book_meta .book_meta_i{
		display:inline-block;
	}
</style>